<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>添加用户</title>
<style type="text/css">
	*{
		margin: 0px;
		padding: 0px;
	}
	.title{
		padding: 0 80px 0 20px;
	    height: 42px;
	    line-height: 42px;
	    border-bottom: 1px solid #eee;
	    font-size: 14px;
	    color: #333;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	    background-color: #ccc;
	    border-radius: 2px 2px 0 0;
	}
	ul{
		list-style: none;
	}
	#form{
		padding: 15px;
	}
	.label_name{
	    width: 100px;
	    float: left;
	    text-align: right;
	    font-size: 14px;
	    height: 36px;
	    line-height: 36px;
	}
	.cont_style{
		float: left;
	    width: 600px;
	    position: relative;
	    height: 36px;
	}
	.cont_style select{
		display: block;
		width: 220px;
    	margin-left: 10px;
    	padding: 4px 6px;
    	height: 36px;
    	border-radius: 0;
	    -webkit-box-shadow: none!important;
	    box-shadow: none!important;
	    color: #858585;
	    background-color: #fff;
	    border: 1px solid #d5d5d5;
	}
	li{
		height: 36px;
    	line-height: 36px;
    	margin: 10px 0px;	
	}
	.cont_style input{
		border-radius: 0!important;
	    color: #858585;
	    background-color: #fff;
	    border: 1px solid #d5d5d5;
	    padding: 5px 4px;
	    margin-left: 10px;
	    line-height: 1.2;
	    font-size: 14px;
	    font-family: KaiTi;
	    -webkit-box-shadow: none!important;
	    box-shadow: none!important;
	    -webkit-transition-duration: .1s;
	    transition-duration: .1s;
	}
	.resizebox{
		width: 600px;
		height: 300px;
		border: 1px solid #333;
		float: left;
		margin-left: 10px;
		padding: 15px;
	}
	#uimage{
		display: block;
	}
	.btn{
    	height: 36px;
	    line-height: 36px;
	    margin: 0 6px;
	    padding: 0 15px;
	    border: 1px solid #dedede;
	    border-radius: 2px;
	    font-weight: 400;
	    cursor: pointer;
	    text-decoration: none;
	    border-color: #4898d5;
    	background-color: #2e8ded;
    	color: #fff;
	}
	
</style>
<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		//change: 表示这个元素被改变之后触发的事件
		$('#uimage').change(function(e){						//设置Id名为uimage的元素发生改变时触发这个逻辑
			var _URL = window.URL || window.webkitURL;			//获取URL地址
		    var file, img;										//声明两个变量
		    if ((file = this.files[0])) {						//获取当前是否选择有文件，如果则获取第一个文件赋给file
		        img = new Image();								//创建一个图片对象
		        img.onload = function() {						//设置图片加载完成后触发的事件
		            $('#userImage').attr('src', this.src);		//触发修改ID名为userImage元素的资源信息
		            console.log(this.width)
		        };
		        img.src = _URL.createObjectURL(file);			//设置图片对象的链接地址为刚刚选择图片的地址
		    }
		});
	});

</script>
</head>
<body>
	<h2 class="title">添加用户</h2>
	<form action="addUser.do" method="post" id="form" enctype="multipart/form-data">
		<ul>
			<li>
				<label class="label_name">请选择角色：</label>
				  <span class="cont_style">
					  <select class="form-control" id="form-field-select-1" name="urole">
					    <option value="">选择分类</option>
					    <option value="管理员">管理员</option>
					    <option value="用户">用户</option>
					    <option value="商家">商家</option>
					  </select>
				 </span>
			</li>
			<li>
				<label class="label_name">用户名：</label>
				  <span class="cont_style">
					  <input type="text" name="username" placeholder="请输入用户名" />
				 </span>
			</li>
			<li>
				<label class="label_name">密码：</label>
				  <span class="cont_style">
					  <input type="text" name="password" placeholder="请输入密码" />
				 </span>
			</li>
			<li>
				<label class="label_name">昵称：</label>
				  <span class="cont_style">
					  <input type="text" name="uname" placeholder="请输入昵称" />
				 </span>
			</li>
			<li>
				<label class="label_name">联系方式：</label>
				  <span class="cont_style">
					  <input type="text" name="utel" placeholder="请输入电话号码" />
				 </span>
			</li>
			<li style="height: 340px;">
				<label class="label_name">头像：</label>
				  <div class="resizebox">
				  	  <img src="images/image.png" id="userImage"/>
					  <input type="file" name="img" id="uimage"/>
				 </div>
			</li>
			<li>
				<label class="label_name"></label>
				<span class="cont_style">
					<button type="submit" class="btn">添加</button>
					<button type="button" class="btn">取消</button>
				</span>
			</li>
		</ul>
		
	</form>
</body>
</html>